<template>
  <div class="report-box">
    <div class="upload-report g-bkColor" :style="'minHeight:' + gHeight + 'px;'">
      <div class="waterfall">

        <div class="item">
          <div class="item-content">
            <!--小区选择-->
            <selectedCommunity class="g-bkColor3" @onCommunityChange="onChangeDeptId"></selectedCommunity>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <!--24小时报警趋势图-->
            <dayWarning class="g-bkColor3"></dayWarning>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <!--停车管理-->
            <stopCar class="g-bkColor3"></stopCar>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--小区出入-->
            <apartment class="g-bkColor3"></apartment>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--人流量预警-->
            <peopleNum class="g-bkColor3"></peopleNum>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--环保质量-->
            <eQuality class="g-bkColor3"></eQuality>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--人员出入-->
            <peoplePass class="g-bkColor3"></peoplePass>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--机动车停车管理-->
            <stopManage class="g-bkColor3"></stopManage>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--报警总数-->
            <countWarn :area-id="areaId" class="g-bkColor3"></countWarn>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--非机动车出入管理-->
            <passManage class="g-bkColor3"></passManage>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--窖井管理-->
            <wellManage class="g-bkColor3"></wellManage>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--消防安全-->
            <fireSafety class="g-bkColor3"></fireSafety>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--消防通道占用情况-->
            <fireOccupancy class="g-bkColor3"></fireOccupancy>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--小区监控查看-->
            <communityMonitor class="g-bkColor3"></communityMonitor>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--本月报警趋势-->
            <monthWarnTrend class="g-bkColor3"></monthWarnTrend>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--本月小区高发排名-->
            <apartmentRanking class="g-bkColor3"></apartmentRanking>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--24小时车辆进出纪录-->
            <carEntryExitRecord class="g-bkColor3"></carEntryExitRecord>
          </div>
        </div>

        <div class="item">
          <div class="item-content">
            <!--重点区域人流量-->
            <peopleFlow class="g-bkColor3"></peopleFlow>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import selectedCommunity from '../../components/common/table/selectedCommunity'
import dayWarning from '../../components/common/event/dayWarning'
import countWarn from '../../components/common/table/countWarn'
import stopCar from '../../components/common/event/stopCar'
import peopleNum from '../../components/common/event/peopleNum'
import apartment from '../../components/common/event/apartment'
import eQuality from '../../components/common/table/eQuality'
// import famousYun from '../../components/common/table/famousYun'
import peoplePass from '../../components/common/table/peoplePass'
import stopManage from '../../components/common/table/stopManage'
import passManage from '../../components/common/table/passManage'
import wellManage from '../../components/common/table/wellManage'
import fireSafety from '../../components/common/table/fireSafety'
import fireOccupancy from '../../components/common/table/fireOccupancy'
import communityMonitor from '../../components/common/table/communityMonitor'
import apartmentRanking from '../../components/common/table/apartmentRanking'
import monthWarnTrend from '../../components/common/table/monthWarnTrend'
import carEntryExitRecord from '../../components/common/table/carEntryExitRecord'
import peopleFlow from '../../components/common/table/peopleFlow'

export default {
  name: 'report',
  data () {
    return {
      areaId: null,
      alarmList: [],
      gHeight: this.$base.getDocumentHeight() - this.$base.getConst('common', 'headerHeight')
    }
  },
  mounted () {
    // this.getHeight();
  },
  components: {
    selectedCommunity, // 选择小区
    eQuality, // 环保质量
    dayWarning, // 24小时报警趋势图
    countWarn, // 报警总数
    stopCar, // 停车管理
    peopleNum, // 人流量预警
    apartment, // 小区出入
    // famousYun, // 云间名门
    peoplePass, // 人员出入
    stopManage, // 机动车停车管理
    passManage, // 非机动车出入管理
    wellManage, // 窨井管理
    fireSafety, // 消防安全
    fireOccupancy, // 消防通道占用情况
    communityMonitor, // 小区监控查看
    monthWarnTrend, // 本月报警趋势
    apartmentRanking, // 本月小区高发排名
    carEntryExitRecord, // 24小时车辆进出纪录
    peopleFlow // 重点区域人流量
  },
  methods: {
    // 小区选择
    onChangeDeptId (e) {
      this.areaId = e.deptId
    }
  }

}
</script>
<style lang="less" scoped>
  .skin-white {
    .g-bkColor3 {
      box-shadow: rgba(0, 0, 0, .1) 0 3px 12px;
      background-color: #fff !important;

      /*---------------------- 24小时报警趋势图 白色版本样式  ----------------------*/
      /deep/ .day-content {
        background-color: #FFFFFF !important;
        .title {
          color: #4C6072 !important;
        }
      }

      /*---------------------- 云间名门 白色版本样式  ----------------------*/
      /deep/ .yun-content {
        background-color: #FFFFFF !important;
        p {
          color: #4C6072;
        }
        .y-position {
          color: #333333;
        }
      }

      /*---------------------- 停车管理 白色版本样式  ----------------------*/
      /deep/ .car-content {
        background-color: #FFFFFF !important;
        .title {
          color: #4C6072;
        }
        .car-legend i, .car-legend b {
          color: #333333;
        }
      }

      /*---------------------- 小区出入 白色版本样式  ----------------------*/
      /deep/ .apartment-content {
        background-color: #FFFFFF !important;
        .title {
          color: #4C6072;
        }
      }

      /*---------------------- 人流量预警 白色版本样式  ----------------------*/
      /deep/ .p-Num {
        background-color: #FFFFFF !important;
        .p-head i {
          color: #4C6072;
        }
      }

      /*---------------------- 环保质量 白色版本样式  ----------------------*/
      /deep/ .quality-content {
        background-color: #FFFFFF !important;
        .title, .p-head i, .form-control option {
          color: #4C6072 !important;
        }
        .form-control {
          background: rgba(0, 0, 0, .1) !important;
        }
      }

      /*---------------------- 人员出入 白色版本样式  ----------------------*/
      /deep/ .pass-content {
        background-color: #FFFFFF !important;
        .pass-name {
          color: #4C6072;
        }
      }

      /*---------------------- 机动车停车管理 白色版本样式  ----------------------*/
      /deep/ .manage-content {
        background-color: #FFFFFF !important;
        .title {
          color: #4C6072;
        }
      }

      /*---------------------- 报警总数 白色版本样式  ----------------------*/
      /deep/ .countWarn {
        background-color: #fff !important;
        .mainCount p {
          color: #4C6072 !important;
          font-weight: bold;
        }
        .allCountData {
          color: #333333 !important;
        }
        /deep/ .warn-all, /deep/ .warn-legend > div {
          color: #333333 !important;
        }
      }

      /*---------------------- 本月报警趋势 白色版本样式  ----------------------*/
      /deep/ .monthWarn-content {
        background-color: #fff !important;
        .title {
          color: #4C6072;
        }
      }

      /*---------------------- 本月小区高发排名 白色版本样式  ----------------------*/
      /deep/ .cell-paiming-main {
        .title {
          color: #4C6072;
          font-weight: 600;
        }
        .time {
          color: #333333
        }
        .cell-paiming-list li {
          background: url("/images/icons/line_grey.png") repeat-x center center;
        }
        .cell-paiming-list span.line {
          background-color: rgba(0, 0, 0, .1);
        }
        .cell-paiming-list li span.name {
          background: rgba(255, 255, 255, 1);
        }
        .cell-paiming-list li span.total {
          background: rgba(255, 255, 255, 1);
        }
      }

      /*---------------------- 24小时车辆进出纪录 白色版本样式  ----------------------*/
      /deep/ .carRecord-content {
        background-color: #fff !important;
        .title {
          color: #4C6072;
        }
      }

      /*---------------------- 重点区域人流量 白色版本样式  ----------------------*/
      /deep/ .peopleFlow-content {
        background-color: #fff !important;
        p {
          color: #4C6072;
        }
      }

    }
  }

  .report-box {
    width: 100%;
  }

  .upload-report {
    width: 100%;
    background: #202835;
    padding: 10px;
    box-sizing: border-box;
  }

  .upload-report .waterfall {
    column-count: 5;
    -moz-column-count: 5;
    -webkit-column-count: 5;
    flex-wrap: wrap;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-break-before: avoid;
    -webkit-column-break-after: avoid;
    -webkit-column-break-inside: avoid;
  }

  .upload-report .item {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-break-before: avoid;
    -webkit-column-break-after: avoid;
    -webkit-column-break-inside: avoid;
  }

  .upload-report .item-content {
    width: 100%;
    -webkit-column-break-before: avoid;
    -webkit-column-break-after: avoid;
    -webkit-column-break-inside: avoid;
  }

  @media only screen and (min-width: 1700px) {
    .upload-report .waterfall {
      column-count: 5;
      -moz-column-count: 5;
      -webkit-column-count: 5;
    }
  }

  @media only screen and (min-width: 1201px) and (max-width: 1500px) {
    .upload-report .waterfall {
      column-count: 4;
      -moz-column-count: 4;
      -webkit-column-count: 4;
    }
  }

  @media only screen and (max-width: 1200px) {
    .upload-report .waterfall {
      column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
    }
  }
</style>
